<template>
  <div>
    <canvas ref="canvas"></canvas>
    <!-- <button @click="onPrevPage">Previous</button>
		<button @click="onNextPage">Next</button> -->
  </div>
</template>

<script setup>
// import {ref, reactive, pdfjsLib} from 'pdfjs-dist'
import { onMounted } from "vue";

/* 定义变量内容 */
let canvas = ref();
let pdfDoc = ref(null);
let pageNum = ref(1);
let pageRendering = ref(false);
let pageNumPending = reactive(null);
let scale = ref(1.5);
/* 定义函数内容 */
function getPdfFromBackend() {
  const pdfUrl =
    "/api/Department/DownloadDepartmentFile?remote_url=\\\\10.6.100.80\\HLEquipmentImportFile\\部室文件\\20240322\\2792d1f3a5dd855ab494f6acac7bad7025f08c215bbddd50c7850b035c5479e3\\3DDOTNETGuide.pdf"; // Backend API endpoint to get the PDF file
  pdfjsLib.getDocument(pdfUrl).promise.then((pdfDoc) => {
    pdfDoc.value = pdfDoc;
    renderPage(pageNum.value);
  });
}

function renderPage(num) {
  const context = canvas.value.getContext("2d");
  pageRendering.value = true;
  pdfDoc.value.getPage(num).then((page) => {
    const viewport = page.getViewport({ scale: scale.value });
    canvas.value.height = viewport.height;
    canvas.value.width = viewport.width;
    const renderContext = {
      canvasContext: context,
      viewport: viewport,
    };
    page.render(renderContext).promise.then(() => {
      pageRendering.value = false;
      if (pageNumPending !== null) {
        renderPage(pageNumPending);
        pageNumPending = ref(null);
      }
    });
  });
}

// function queueRenderPage(num) {
// 	if (pageRendering.value) {
// 		Object.assign(pageNumPending,num);
// 	} else {
// 		renderPage(num);
// 	}
// }
// function onPrevPage() {
// 	if (pageNum.value <= 1) {
// 		return
// 	}
// 	pageNum.value--
// 	queueRenderPage(pageNum.value)
// }
// function onNextPage() {
// 	if (pageNum.value >= pdfDoc.value.numPages) {
// 		return
// 	}
// 	pageNum.value++
// 	queueRenderPage(pageNum.value)
// }

/* 定义生命周期函数 */
onMounted(() => {
  getPdfFromBackend();
});
</script>

<style scoped></style>
